<!DOCTYPE html>
<html>
<head>
    <title>API测试</title>
    <meta charset="UTF-8">
    <style>
        body { padding: 20px; font-family: Arial, sans-serif; }
        .container { max-width: 800px; margin: 0 auto; }
        .section { margin-bottom: 20px; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
        button { padding: 10px; margin: 5px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 4px; }
        button:hover { background-color: #45a049; }
        input { padding: 8px; margin: 5px; width: 200px; border: 1px solid #ddd; border-radius: 4px; }
        pre { background: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto; }
        .status { margin-top: 10px; padding: 10px; border-radius: 4px; }
        .success { background-color: #dff0d8; color: #3c763d; }
        .error { background-color: #f2dede; color: #a94442; }
        .loading { display: none; margin: 10px 0; }
    </style>
</head>
<body>
    <div class="container">
        <div class="section">
            <h2>API测试面板</h2>
            <div id="serverStatus" class="status">检查服务器状态中...</div>
        </div>

        <div class="section">
            <h3>1. 发送验证码</h3>
            <input type="text" id="phone" placeholder="输入手机号" value="13800138000">
            <button onclick="sendCode()">发送验证码</button>
            <div id="sendCodeLoading" class="loading">发送中...</div>
            <pre id="sendCodeResult"></pre>
        </div>

        <div class="section">
            <h3>2. 登录</h3>
            <input type="text" id="loginPhone" placeholder="输入手机号" value="13800138000">
            <input type="text" id="code" placeholder="输入验证码">
            <button onclick="login()">登录</button>
            <div id="loginLoading" class="loading">登录中...</div>
            <pre id="loginResult"></pre>
        </div>

        <div class="section">
            <h3>3. 获取工作列表</h3>
            <button onclick="getWorkList()">获取列表</button>
            <div id="workListLoading" class="loading">加载中...</div>
            <pre id="workListResult"></pre>
        </div>

        <div class="section">
            <h3>4. 获取发布数据</h3>
            <button onclick="getPublishData()">获取数据</button>
            <div id="publishDataLoading" class="loading">加载中...</div>
            <pre id="publishDataResult"></pre>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:3001/api';

        // 检查服务器状态
        async function checkServer() {
            const statusDiv = document.getElementById('serverStatus');
            try {
                const response = await fetch(`${API_BASE}/workbench/publish-data`);
                if (response.ok) {
                    statusDiv.className = 'status success';
                    statusDiv.textContent = '服务器连接正常 ✓';
                } else {
                    throw new Error('服务器响应异常');
                }
            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.textContent = '无法连接到服务器 ✗ - 请确保服务器已启动';
                console.error('服务器连接错误:', error);
            }
        }

        // 页面加载完成后检查服务器状态
        window.onload = checkServer;

        async function sendCode() {
            const phone = document.getElementById('phone').value;
            const loading = document.getElementById('sendCodeLoading');
            const result = document.getElementById('sendCodeResult');
            
            loading.style.display = 'block';
            try {
                const response = await fetch(`${API_BASE}/send-code`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ phone })
                });
                const data = await response.json();
                result.textContent = JSON.stringify(data, null, 2);
                if (data.code === 200) {
                    result.className = 'success';
                } else {
                    result.className = 'error';
                }
            } catch (error) {
                result.textContent = '请求失败: ' + error.message;
                result.className = 'error';
            } finally {
                loading.style.display = 'none';
            }
        }

        async function login() {
            const phone = document.getElementById('loginPhone').value;
            const code = document.getElementById('code').value;
            const loading = document.getElementById('loginLoading');
            const result = document.getElementById('loginResult');
            
            loading.style.display = 'block';
            try {
                const response = await fetch(`${API_BASE}/login`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ phone, code })
                });
                const data = await response.json();
                result.textContent = JSON.stringify(data, null, 2);
                if (data.code === 200) {
                    result.className = 'success';
                } else {
                    result.className = 'error';
                }
            } catch (error) {
                result.textContent = '请求失败: ' + error.message;
                result.className = 'error';
            } finally {
                loading.style.display = 'none';
            }
        }

        async function getWorkList() {
            const loading = document.getElementById('workListLoading');
            const result = document.getElementById('workListResult');
            
            loading.style.display = 'block';
            try {
                const response = await fetch(`${API_BASE}/workbench/work-list`);
                const data = await response.json();
                result.textContent = JSON.stringify(data, null, 2);
                if (data.code === 200) {
                    result.className = 'success';
                } else {
                    result.className = 'error';
                }
            } catch (error) {
                result.textContent = '请求失败: ' + error.message;
                result.className = 'error';
            } finally {
                loading.style.display = 'none';
            }
        }

        async function getPublishData() {
            const loading = document.getElementById('publishDataLoading');
            const result = document.getElementById('publishDataResult');
            
            loading.style.display = 'block';
            try {
                const response = await fetch(`${API_BASE}/workbench/publish-data`);
                const data = await response.json();
                result.textContent = JSON.stringify(data, null, 2);
                if (data.code === 200) {
                    result.className = 'success';
                } else {
                    result.className = 'error';
                }
            } catch (error) {
                result.textContent = '请求失败: ' + error.message;
                result.className = 'error';
            } finally {
                loading.style.display = 'none';
            }
        }
    </script>
</body>
</html> 